/**
 * Created by wei on 17/12/28.
 */

import React, { Component } from 'react';
import Table from 'rc-table';
import Select from 'react-select';
import Pager from '../common/pager';
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css';

class Users extends Component{

    constructor(props){
        super(props);
        this.state = {
            username: this.props.pageInfo.username,
            nickname: this.props.pageInfo.nickname,
            source: this.props.pageInfo.source,
            selectedOption: '',
        }
    }


    queryHandle(){
        const {fnQueryReload} = this.props;
        fnQueryReload(this.state.username, this.state.nickname, this.state.source);
    }

    changeUsername(e){
        console.log("username");
        this.setState({
            username: e.target.value,
        });
    }

    changeNickname(e){
        console.log("nickname");
        this.setState({
            nickname: e.target.value,
        });
    }


    changeSource = (selectedOption) => {
        this.setState({ selectedOption,
                        source: selectedOption.value});
        console.log(`Selected: ${selectedOption.label}`);
    }


    render(){

        const {dataSource, pageInfo,fnPageLoad} = this.props;

        const columns = [{
            title: 'username', dataIndex: 'username', key:'username', width: 200, align:'center',
        }, {
            title: 'nickname', dataIndex: 'nickname', key:'nickname', width: 200, align:'center',
        }, {
            title: 'source', dataIndex: 'source', key:'source', width: 100, align:'center', render:(t,v,i)=>{
                if(t == 1){
                    return '注册用户';
                }else{
                    return '系统用户';
                }
            }
        },{
            title: 'status', dataIndex: 'status', key:'status', width: 50, align:'center', render:(t,v,i)=>{
                if(t === 1){
                    return '正常';
                }else if(t === 2){
                    return '暂停';
                }else if(t === 3){
                    return '注销';
                }else{
                    return '错误';
                }
            }
        },{
            title: 'level', dataIndex: 'level', key:'level', width: 50, align:'center',
        },{
            title: 'allLike', dataIndex: 'allLike', key:'allLike', width: 50, align:'center',
        },{
            title: 'allHate', dataIndex: 'allHate', key:'allHate', width: 50, align:'center',
        },{
            title: 'description', dataIndex: 'description', key:'description', width: 200, align:'center',
        }, {
            title: 'Operations', dataIndex: '', key:'operations', render: () => <a href="#">Delete</a>,
        }];

        return (
            <div>
                <div className="float_l" style={{marginLeft:'55px', marginBottom:'10px'}}>
                    <div className="float_l" style={{width:'250px'}}>
                        <input ref="username" onChange={(e)=> this.changeUsername(e)} className="mid" value={this.state.username} type="text" placeholder="用户名" size="35" style={{padding:'3px 5px'}}/>
                    </div>
                    <div className="float_l" style={{width:'250px'}}>
                        <input ref="nickname" onChange={(e)=> this.changeNickname(e)} className="mid" value={this.state.nickname} type="text" placeholder="昵称" size="35" style={{padding:'3px 5px'}}/>
                    </div>
                    <div className="float_l" style={{width:'250px'}}>
                        <Select
                            name="form-field-name"
                            value={this.state.source}
                            onChange={this.changeSource}
                            options={[
                                { value: '0', label: 'ALL' },
                                { value: '1', label: '注册用户' },
                                { value: '2', label: '系统用户' },
                            ]}
                        />
                    </div>
                    <div className="float_l" style={{width:'100px'}}>
                        <button className="btn1" onClick={this.queryHandle.bind(this)}>查询</button>
                    </div>
                </div>
                <Table columns={columns} data={dataSource} />
                <div style={{width:'80%', margin:'0 auto'}}>
                    共{pageInfo.totalElements}条<Pager pageInfo={pageInfo} pageChange={fnPageLoad} />
                </div>
            </div>
        );
    }

}

Users.propTypes = {
    dataSource: PropTypes.array.isRequired,
    pageInfo: PropTypes.object.isRequired,
    fnPageLoad: PropTypes.func.isRequired,
    fnQueryReload: PropTypes.func.isRequired,
};

export default Users;